<template>
	<el-form label-width="80px" :model="form" :rules="rules" ref="queryForm" @submit.prevent>
		<el-row>
			<el-col :span="12">
				<el-form-item label="用户昵称" prop="nickName">
					<el-input v-model="form.nickName" style="width:220px;"></el-input>
				</el-form-item>

				<el-form-item label="手机号码" prop="phonenumber">
					<el-input v-model="form.phonenumber" style="width:220px;"></el-input>
				</el-form-item>

				<el-form-item label="用户名称" prop="userName">
					<el-input v-model="form.userName" style="width:220px;"></el-input>
				</el-form-item>


				<el-form-item label="用户性别" prop="sex">
					<el-select v-model="form.sex" size="default" placeholder="请选择" style="width: 220px" clearable
						filterable>
						<el-option label="男" value="0" />
						<el-option label="女" value="1" />
						<el-option label="未知" value="2" />
					</el-select>
				</el-form-item>

				<el-form-item label="岗位" prop="postId">
					<el-select v-model="form.postId" size="default" placeholder="请选择" style="width: 220px" clearable
						filterable>
						<el-option v-for="item in postOptions" :label="item.postName" :value="item.postId"
							:key="item.postId" />
					</el-select>
				</el-form-item>



				<el-form-item label="备注" prop="remark">
					<el-input v-model="form.remark" style="width:220px;"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="所属部门" prop="deptId">
					<el-input v-model="form.deptId" style="width:220px;"></el-input>
				</el-form-item>

				<el-form-item label="邮箱" prop="email">
					<el-input v-model="form.email" style="width:220px;"></el-input>
				</el-form-item>


				<el-form-item label="用户密码" prop="password">
					<el-input v-model="form.password" style="width:220px;"></el-input>
				</el-form-item>

				<el-form-item label="状态" prop="status">
					<el-radio-group v-model="form.status" class="ml-4">
						<el-radio value="0" size="large">正常</el-radio>
						<el-radio value="1" size="large">停用</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="角色" prop="roleId">
					<!-- <el-select v-model="form.roleId" size="default" placeholder="请选择" style="width: 220px" clearable
						filterable>
						<el-option v-for="item in roleOptions" :label="item.roleName" :value="item.roleId"
							:key="item.roleId" />
					</el-select> -->
					
					<el-select v-model="form.roleId" size="default" placeholder="请选择" style="width: 220px" clearable
						filterable>
						<el-option  label="超级管理员" :value="1" />
						<el-option  label="普通角色" :value="2" />
					</el-select>
					
					
				</el-form-item>
			</el-col>

		</el-row>

		<div style="display: flex;justify-content: flex-end;">
			<el-button @click="closethis()" @keyup.prevent @keydown.enter.prevent>取消</el-button>
			<el-button type="primary" @click="submit(queryForm)" @keyup.prevent @keydown.enter.prevent>确定</el-button>
		</div>

	</el-form>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'

	import {
		commonInterface,
		commonSystemUser
	} from '@/api/common/common'



	const emit = defineEmits(['getList', 'closeWindow'])
	const props = defineProps(['editData'])

	const form = ref({

		status: '0'

	})
	const queryForm = ref('')

	const postOptions = ref()
	const roleOptions = ref()

	//必填项
	const rules = reactive({

		nickName: [{
			required: true,
			message: "此选项不能为空!",
			trigger: "blur"
		}],
		userName: [{
			required: true,
			message: "此选项不能为空!",
			trigger: "blur"
		}],
		password: [{
			required: true,
			message: "此选项不能为空!",
			trigger: "blur"
		}]

	})
	//取消
	const closethis = () => {
		emit('closeWindow')
	}

	//确定
	const submit = async (e) => {
		if (!e) return
		await e.validate((valid) => {
			if (valid) {
				let method = 'post'
				if (props.editData) method = 'put'
				commonInterface('/back/system/user/', form.value, method).then(result => {
					if (result.code === 200) {
						ElMessage.success(result.msg)
						emit('closeWindow')
						emit('getList')
					} else {
						ElMessage.error(result.msg)
					}
				})
			}
		})
	}

	const getPost = () => {
		commonSystemUser().then(result => {
			if (result.code === 200) {
				postOptions.value = result.posts
				roleOptions.value = result.roles
			}
		})
	}


	onMounted(() => {
		if (props.editData) {
			form.value = props.editData.data
			postOptions.value = props.editData.posts
			// roleOptions.value = props.editData.roles
			form.value.roleId = props.editData.roleIds[0]
			form.value.postId = props.editData.postIds[0]
		} else {
			getPost()
		}
	})
</script>

<style lang="scss" scoped>
</style>